@extends('admin.common.main')
@section('css')
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css" />
<style>
#img{
    width:200px;
    height:100px;
}
</style>
@endsection
@section('cnt')
<div class="x-body page-container">
    @include('admin.common.validate')
    @include('admin.common.msg')
    
    <a class="layui-btn" href="{{ route('admin.article.index') }}">返回</a>
    <form method="post" id="myForm" action="{{ route('admin.article.update',$article) }}">
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>文章标题
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="title" name="title" 
                  autocomplete="off" class="layui-input" v-model="info.title">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>文章描述
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="desn" name="desn" 
                  autocomplete="off" class="layui-input" v-model="info.desn">
              </div>
          </div>
           <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>文章封面
              </label>
              <div class="layui-input-inline">
                  {{-- <input type="file" id="pic" name="pic" 
                  autocomplete="off" class="layui-input"> --}}
                  {{-- 表单提交的时候的路径的地址 --}}
                  <input type="hidden" name="pic" id="pic" value="{{ config('up.pic') }}">
                  <div id="picker">上传文章封面</div>
                  <div id="imgdiv">
                      <img :src="info.pic" id="img">
                  </div>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>文章内容
              </label>
              <textarea name="body" id="body" cols="30" rows="10" ></textarea>
          </div>
         
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" type="button" @click="dopost">
                  修改文章
              </button>
          </div>
      </form>
</div>
@endsection
@section('js')
<script src="/js/vue.js"></script>
<script src="/ueditor/ueditor.config.js"></script>
<script src="/ueditor/ueditor.all.js"></script>
<script src="/webuploader/webuploader.js"></script>
<script>
    var url = $("#myForm").attr('action');
    var token = '{{ csrf_token() }}';
    //使用vue来完成页面的编辑工作
    //vue管理
    new Vue({
        el:'.page-container',
        data:{
            info:{!! $article !!}
        },
        //组件挂载完毕
        mounted(){
            //其实很多初始化的工作，为了避免不和vue冲突 ，可以选择在挂载完毕之后进行加载
            //富文本编辑器
            //百度编辑器初始化  
            this.editor = UE.getEditor('body',{
                initialFrameHeight:450,
                initialFrameWidth:1300
            });
            //渲染完毕，进行百度编辑器的数据填充
            this.editor.addListener("ready",()=>{
                //设置富文本的内容
                this.editor.setContent(this.info.body)
            });
            //初始化webuploader
            //
            this.uploader = WebUploader.create({
                //选完之后，是否自动上传
                auto:true,
                //swf文件路径
                swf:'/webuploader/Uploader.swf',
                //文件接收服务端,上传的php代码
                server:'{{ route('admin.article.upfile') }}',
                //选择文件的按钮
                pick:{
                    id:"#picker",
                    //是否开启选择多个文件的能力
                    multiple:false
                },
                //文件上传携带的参数
                formData:{
                    _token:'{{ csrf_token() }}'
                },
                //文件上传的表单名称【默认是file】
                fileVal:'file',
                //压缩image,默认如果是jpeg，文件上传前会进行压缩再上传
                resize:true
            });
            //文件上传之后的回调 【这是插件内置方法】
            this.uploader.on('uploadSuccess',function(file,ret){
                //图片的路径
                let src = ret.url;
                //给表单添加value变量
                $("#pic").val(src);
                //给图片添加src
                $("#img").attr('src',src);
                $("#img").css('display','block');
            });
        },
        methods:{
            async dopost(evt){
                //获取富文本框输入的内容
                this.info.body = this.editor.getContent();
                this.info._token = token;
                this.info._method = 'PUT';
                
                //JSON字符串转化
                var frmData = JSON.stringify(this.info);
                console.log(frmData)

                let {status,msg} = await $.post(url,this.info);
                layer.msg(msg);
                
                
            }
        }
    });



    
   
    
    
   

    
</script>
@endsection